<template>
  <ContentWrap class="search-form">
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      clas="-mb-15px"
      label-width="68px"
    >
      <el-form-item label="老人姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          class="!w-240px"
          clearable
          placeholder="请输入姓名"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="queryParams.sex" placeholder="请选择姓别">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_SEX)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
        /></el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
        <el-button @click="openForm('create')">
          <Icon icon="ep:plus" class="mr-5px" v-hasPermi="['elder:try-living:create']" /> 新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <Table
    :columns="columns"
    @page-change="getList"
    :page-param="queryParams"
    :page-data="Elderdata"
    @row-dblclick="handleTableDblclick"
  >
    <template #menu="{ row }">
      <context-menu-item
        label="修改"
        @click="openForm('update', row.id)"
        v-hasPermi="['elder:try-living:update']"
      />
      <context-menu-item
        label="删除"
        @click="handleDelete(row.id)"
        v-hasPermi="['elder:try-living:delete']"
      />
    </template>
    <template #issex="{ row }">
      {{ getDictObj(DICT_TYPE.COMMON_SEX, row.sex).label }}
    </template>
  </Table>

  <ElderTryLivingEdit ref="formRef" @success="getList" />
</template>
<script lang="ts" name="ElderTryLiving" setup>
import { DICT_TYPE, getIntDictOptions, getDictObj } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as TryLivingApi from '@/api/elder/tryLiving'
import ElderTryLivingEdit from './ElderTryLivingEdit.vue'
const loading = ref(true) // 列表的加载中'

const queryParams = reactive({
  name: undefined,
  sex: undefined,
  pageNo: 1,
  pageSize: 100
})
const columns: TableColumnList = [
  {
    label: '试住编号',
    prop: 'tryNo'
  },
  {
    label: '姓名',
    prop: 'elder.name'
  },
  {
    label: '老人编号',
    prop: 'elder.elderNo'
  },
  {
    label: '性别',
    prop: 'elder.sex',
    slot: 'issex'
  },
  {
    label: '手机号',
    prop: 'elder.mobile'
  },
  {
    label: '入住开始时间',
    prop: 'beginTime',
    formatter: ({ beginTime }) => formatDate(beginTime, 'YYYY-mm-DD')
  },
  {
    label: '入住结束时间',
    prop: 'endTime',
    formatter: ({ endTime }) => formatDate(endTime, 'YYYY-mm-DD')
  },
  {
    label: '创建时间',
    prop: 'createTime',
    formatter: ({ createTime }) => formatDate(createTime)
  }
]
onMounted(() => {
  getList()
})
/** 查询试住列表 */
const Elderdata = ref()
const getList = async () => {
  loading.value = true
  try {
    Elderdata.value = await TryLivingApi.query('')
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  // queryParams.pageNo = 1
  getList()
}
/** 重置按钮操作 */
const queryFormRef = ref() // 搜索的表单
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
/** 删除操作 */
const handleDelete = async (id: number) => {
  TryLivingApi.deleted(id)
}

/** 处理tables双击修改事件 */
const handleTableDblclick = (row) => {
  formRef.value.open('update', row.id)
}

const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}
</script>
